JavaScript Proxy Handler-validering: Typsäker objektavlyssning

JavaScript Proxies erbjuder en kraftfull mekanism för att avlyssna och anpassa grundläggande objektoperationer. Ett av de mest övertygande användningsfallen är datavalidering. Genom att utnyttja Proxy-hanterare kan du tvinga fram begränsningar och typsäkerhet på objekts-egenskaper, vilket leder till mer robust och underhållbar kod. Detta blogginlägg utforskar hur man använder JavaScript Proxies för effektiv objektvalidering, med praktiska exempel och vägledning för utvecklare på alla nivåer. Vi kommer att täcka olika hanterarmetoder och visa hur de kan användas för att säkerställa dataintegritet.

Förståelse för JavaScript Proxies

Innan vi dyker ner i validering, låt oss kortfattat granska vad JavaScript Proxies är och hur de fungerar. Ett Proxy-objekt omsluter ett annat objekt (målet) och avlyssnar operationer som utförs på det målet. Proxyn låter dig definiera anpassat beteende för operationer som att hämta en egenskap, sätta en egenskap, anropa en funktion eller konstruera ett nytt objekt. Denna anpassning uppnås genom en hanterare, som är ett objekt som innehåller metoder som avlyssnar specifika operationer.

Grundsyntaxen för att skapa en Proxy är:

            const proxy = new Proxy(target, handler);

            

              
                Copy
              
            
          

• target: Objektet som ska omslutas av Proxyn.
• handler: Ett objekt som innehåller metoder (fällor) som avlyssnar operationer på målet.

Proxy Handler-metoder för validering

Hanterarobjektet kan innehålla olika metoder, var och en motsvarande en annan operation på mål-objektet. Här är några av de mest relevanta metoderna för validering:

• get(target, property, receiver): Avlyssnar åtkomst till egenskaper.
• set(target, property, value, receiver): Avlyssnar tilldelning av egenskaper.
• apply(target, thisArg, argumentsList): Avlyssnar funktionsanrop.
• construct(target, argumentsList, newTarget): Avlyssnar new-operatorn.
• deleteProperty(target, property): Avlyssnar delete-operatorn.
• defineProperty(target, property, descriptor): Avlyssnar definition av egenskaper.
• has(target, property): Avlyssnar in-operatorn.
• ownKeys(target): Avlyssnar Object.getOwnPropertyNames(), Object.getOwnPropertySymbols() och Reflect.ownKeys().
• preventExtensions(target): Avlyssnar Object.preventExtensions().
• getPrototypeOf(target): Avlyssnar Object.getPrototypeOf().
• setPrototypeOf(target, prototype): Avlyssnar Object.setPrototypeOf().

Vi kommer främst att fokusera på get, set, apply och construct hanterare eftersom de oftast används för valideringsändamål.

Validera egenskaps-tilldelningar med set-hanteraren

set-hanteraren är avgörande för att validera egenskaps-tilldelningar. Den låter dig avlyssna försök att modifiera ett objekts egenskaper och tvinga fram begränsningar innan tilldelningen faktiskt sker.

Exempel: Typkontroll

Låt oss skapa en Proxy som tvingar fram typkontroll för egenskaper i ett Person-objekt. Vi kommer att säkerställa att name alltid är en sträng och age alltid är ett nummer.

            const person = {
  name: 'John Doe',
  age: 30
};

const validator = {
  set: function(target, property, value) {
    if (property === 'name' && typeof value !== 'string') {
      throw new TypeError('Name must be a string');
    }
    if (property === 'age' && typeof value !== 'number') {
      throw new TypeError('Age must be a number');
    }
    // Följande rad är avgörande för att säkerställa att egenskapen faktiskt sätts.
    target[property] = value;
    return true; // Indikerar framgång
  }
};

const proxy = new Proxy(person, validator);

proxy.name = 'Jane Smith'; // Fungerar bra
proxy.age = 25; // Fungerar bra

try {
  proxy.age = '40'; // Kastar TypeError
} catch (e) {
  console.error(e);
}

console.log(proxy.age); // Output: 25

            

              
                Copy
              
            
          

I det här exemplet kontrollerar set-hanteraren typen av värdet som tilldelas name och age. Om typen är felaktig, kastar den en TypeError, vilket förhindrar tilldelningen. Det är viktigt att inkludera target[property] = value; i hanteraren för att faktiskt sätta värdet; annars kommer egenskapen inte att uppdateras.

Exempel: Intervallvalidering

Vi kan också validera att en egenskap ligger inom ett visst intervall. Låt oss till exempel säkerställa att age alltid är mellan 0 och 120.

            const person = {
  name: 'John Doe',
  age: 30
};

const validator = {
  set: function(target, property, value) {
    if (property === 'age') {
      if (typeof value !== 'number') {
        throw new TypeError('Age must be a number');
      }
      if (value < 0 || value > 120) {
        throw new RangeError('Age must be between 0 and 120');
      }
    }
    target[property] = value;
    return true;
  }
};

const proxy = new Proxy(person, validator);

proxy.age = 50; // Fungerar bra

try {
  proxy.age = -5; // Kastar RangeError
} catch (e) {
  console.error(e);
}

            

              
                Copy
              
            
          

Validera egenskaps-åtkomst med get-hanteraren

Även om det är mindre vanligt för strikt validering, kan get-hanteraren användas för att utföra transformationer eller valideringar när en egenskap nås. Du kanske till exempel vill formatera ett telefonnummer eller säkerställa att ett datum är giltigt innan det returneras.

Exempel: Skrivskyddade egenskaper

Du kan simulera skrivskyddade egenskaper genom att kasta ett fel när någon försöker komma åt en egenskap som inte ska läsas direkt.

            const config = {
  apiKey: 'secret_key'
};

const validator = {
  get: function(target, property) {
    if (property === 'apiKey') {
      throw new Error('Cannot directly access apiKey. Use a secure method.');
    }
    return target[property];
  }
};

const proxy = new Proxy(config, validator);

try {
  console.log(proxy.apiKey); // Kastar Error
} catch (e) {
  console.error(e);
}

            

              
                Copy
              
            
          

Detta tillvägagångssätt förhindrar direkt åtkomst till känslig data, vilket tvingar utvecklare att använda en mer kontrollerad metod för att hämta nyckeln (t.ex. en funktion som hanterar autentisering).

Validera funktionsanrop med apply-hanteraren

apply-hanteraren låter dig avlyssna funktionsanrop och validera argumenten som skickas till funktionen. Detta är särskilt användbart för att säkerställa att funktioner tar emot korrekta typer och antal argument.

Exempel: Argumenttypsvalidering

Låt oss skapa en Proxy som validerar argumenten som skickas till en funktion som beräknar arean av en rektangel.

            function calculateArea(width, height) {
  return width * height;
}

const validator = {
  apply: function(target, thisArg, argumentsList) {
    if (argumentsList.length !== 2) {
      throw new Error('calculateArea requires exactly two arguments: width and height.');
    }

    const width = argumentsList[0];
    const height = argumentsList[1];

    if (typeof width !== 'number' || typeof height !== 'number') {
      throw new TypeError('Width and height must be numbers.');
    }

    if (width <= 0 || height <= 0) {
      throw new RangeError('Width and height must be positive values.');
    }

    return target.apply(thisArg, argumentsList);
  }
};

const proxy = new Proxy(calculateArea, validator);

console.log(proxy(5, 10)); // Output: 50

try {
  console.log(proxy(5)); // Kastar Error
} catch (e) {
  console.error(e);
}

try {
  console.log(proxy('5', 10)); // Kastar TypeError
} catch (e) {
  console.error(e);
}

            

              
                Copy
              
            
          

I det här exemplet kontrollerar apply-hanteraren antal och typer av argument som skickas till calculateArea-funktionen. Om argumenten är ogiltiga, kastar den ett fel innan funktionen faktiskt exekveras. Den avgörande raden return target.apply(thisArg, argumentsList); exekverar faktiskt den ursprungliga funktionen med de angivna argumenten.

Validera objekts-konstruktion med construct-hanteraren

construct-hanteraren låter dig avlyssna new-operatorn och validera argumenten som skickas till konstruktorfunktionen. Detta är särskilt användbart för att tvinga fram begränsningar på objekt som skapas med hjälp av konstruktorer.

Exempel: Obligatoriska egenskaper

Låt oss skapa en Proxy som säkerställer att ett User-objekt alltid skapas med ett username och en email.

            class User {
  constructor(username, email) {
    this.username = username;
    this.email = email;
  }
}

const validator = {
  construct: function(target, argumentsList) {
    if (argumentsList.length !== 2) {
      throw new Error('User constructor requires two arguments: username and email.');
    }

    const username = argumentsList[0];
    const email = argumentsList[1];

    if (typeof username !== 'string' || username.length === 0) {
      throw new TypeError('Username must be a non-empty string.');
    }

    if (typeof email !== 'string' || !email.includes('@')) {
      throw new TypeError('Email must be a valid email address.');
    }

    return new target(...argumentsList);
  }
};

const UserProxy = new Proxy(User, validator);

const user1 = new UserProxy('john.doe', 'john.doe@example.com'); // Fungerar bra

try {
  const user2 = new UserProxy('john.doe'); // Kastar Error
} catch (e) {
  console.error(e);
}

try {
  const user3 = new UserProxy('john.doe', 'invalid_email'); // Kastar TypeError
} catch (e) {
  console.error(e);
}

console.log(user1);

            

              
                Copy
              
            
          

I det här exemplet kontrollerar construct-hanteraren antal och typer av argument som skickas till User-konstruktorn. Om argumenten är ogiltiga, kastar den ett fel innan objektet skapas. Raden return new target(...argumentsList); skapar faktiskt en ny instans av klassen med de angivna argumenten.

Avancerade valideringstekniker

Utöver grundläggande typkontroller och intervallvalidering kan Proxies användas för mer avancerade valideringsscenarier.

Validering mellan egenskaper

Du kan använda Proxies för att validera relationer mellan olika egenskaper. Du kanske till exempel vill säkerställa att ett startdatum alltid är före ett slutdatum.

            const event = {
  startDate: '2024-01-15',
  endDate: '2024-01-20'
};

const validator = {
  set: function(target, property, value) {
    target[property] = value; // Sätt värdet först

    if (property === 'endDate' && target.startDate > target.endDate) {
      throw new Error('End date must be after start date.');
    }

    return true;
  }
};

const proxy = new Proxy(event, validator);

proxy.endDate = '2024-01-25'; // Fungerar bra

try {
  proxy.endDate = '2024-01-10'; // Kastar Error
} catch (e) {
  console.error(e);
}

            

              
                Copy
              
            
          

Asynkron validering

Även om det är mindre vanligt kan du använda Proxies med asynkrona operationer för mer komplexa valideringsscenarier. Detta kan innebära att du gör API-anrop för att validera data mot externa källor.

Viktigt att notera: Asynkrona operationer inom Proxy-hanterare kan vara komplexa och bör hanteras noggrant för att undvika att blockera händelseloopen. Det är ofta bättre att utföra asynkron validering utanför Proxy-hanteraren och sedan använda Proxyn för att tvinga fram resultaten.

Fördelar med att använda Proxies för validering

• Centraliserad valideringslogik: Proxies låter dig centralisera valideringslogiken på en enda plats, vilket gör den lättare att underhålla och uppdatera.
• Förbättrad kodläsbarhet: Genom att separera valideringslogiken från den kärn-objektlogiken kan du förbättra läsbarheten och underhållbarheten i din kod.
• Förbättrad typsäkerhet: Proxies hjälper till att tvinga fram typsäkerhet, vilket minskar risken för fel orsakade av felaktiga datatyper.
• Flexibilitet och anpassning: Proxies ger en hög grad av flexibilitet, vilket gör att du kan anpassa valideringsregler för att möta de specifika behoven i din applikation.

Begränsningar med att använda Proxies

• Prestandaoverhead: Proxies introducerar en liten prestandaoverhead på grund av avlyssningen av objektoperationer. Denna overhead är vanligtvis obetydlig för de flesta applikationer, men det är viktigt att överväga i prestandakritiska scenarier.
• Kompatibilitet: Även om Proxies stöds i moderna webbläsare och Node.js, stöds de inte i äldre miljöer. Du kan behöva använda polyfills för att säkerställa kompatibilitet med äldre webbläsare.
• Felsökning: Felsökning av kod som använder Proxies kan vara något mer utmanande på grund av avlyssningen av objektoperationer. Moderna utvecklingsverktyg ger dock bra stöd för felsökning av Proxies.

Bästa praxis för Proxy Handler-validering

• Håll hanterarna enkla: Undvik komplex logik inom Proxy-hanterare för att minimera prestandaoverhead och förbättra läsbarheten.
• Ge tydliga felmeddelanden: Kasta informativa felmeddelanden som hjälper utvecklare att förstå varför valideringen misslyckades.
• Överväg prestanda: Var medveten om prestandapåverkan av Proxies, särskilt i prestandakritiska applikationer.
• Använd med försiktighet: Överanvänd inte Proxies. Använd dem strategiskt för validering och andra metaprogrammeringsuppgifter där de ger en tydlig fördel.
• Testa noggrant: Testa din Proxy-baserade valideringslogik noggrant för att säkerställa att den fungerar som förväntat i alla scenarier.

Globala överväganden för validering

När du utvecklar applikationer för en global publik är det viktigt att ta hänsyn till kulturella skillnader och regionala variationer vid implementering av valideringsregler. Här är några viktiga överväganden:

• Datum- och tidsformat: Använd ett bibliotek som Moment.js eller date-fns för att korrekt hantera datum- och tidsformat för olika platser. Till exempel, i USA, formateras datum ofta som MM/DD/YYYY, medan de i Europa vanligtvis formateras som DD/MM/YYYY.
• Nummerformat: Var medveten om olika nummerformat, inklusive decimalavskiljare och tusentalsavskiljare. I vissa länder används ett kommatecken som decimalavskiljare, medan i andra används en punkt.
• Valutformat: Visa valutavärden i korrekt format för användarens plats, inklusive lämplig valutasymbol och decimalprecision.
• Adressformat: Adressformat varierar avsevärt runt om i världen. Överväg att använda ett bibliotek eller en API som stöder internationell adressvalidering och formatering.
• Telefonnummerformat: Använd ett bibliotek som stöder internationell validering och formatering av telefonnummer för att säkerställa att telefonnummer anges korrekt.
• Namnformat: Var medveten om att namnformat kan variera mellan kulturer. Vissa kulturer använder ett förnamn följt av ett efternamn, medan andra använder ett efternamn följt av ett förnamn. Dessutom har vissa kulturer flera förnamn eller efternamn.
• Teckenuppsättningar: Se till att din applikation stöder olika teckenuppsättningar och kodningar för att rymma namn, adresser och andra textdata på olika språk.
• Kulturella känsligheter: Var medveten om kulturella känsligheter vid utformning av valideringsregler. Till exempel kan vissa typer av data anses vara privata eller känsliga i vissa kulturer.

Exempel: Internationell telefonnummer-validering

            // Antaget att du använder ett bibliotek som "google-libphonenumber"

import { parsePhoneNumberFromString, AsYouType } from 'google-libphonenumber';

function validatePhoneNumber(phoneNumber, countryCode) {
  try {
    const number = parsePhoneNumberFromString(phoneNumber, countryCode);
    if (number && number.isValid()) {
      return true;
    } else {
      return false;
    }
  } catch (error) {
    return false; // Ogiltigt telefonnummerformat
  }
}

// Exempelanvändning (Tyskland)
const isValidGermanNumber = validatePhoneNumber('+4917612345678', 'DE');
console.log('Is valid German number:', isValidGermanNumber); // Output: true

// Exempelanvändning (USA)
const isValidUSNumber = validatePhoneNumber('+15551234567', 'US');
console.log('Is valid US number:', isValidUSNumber); // Output: true

            

              
                Copy
              
            
          

Slutsats

JavaScript Proxies erbjuder en kraftfull och flexibel mekanism för att implementera valideringslogik i dina applikationer. Genom att utnyttja Proxy-hanterare kan du tvinga fram begränsningar och typsäkerhet på objekts-egenskaper, funktionsargument och objekts-konstruktion, vilket leder till mer robust, underhållbar och säker kod. Kom ihåg att överväga prestandainplikationerna och kompatibilitetsproblemen när du använder Proxies, och testa alltid din valideringslogik noggrant. Genom att följa bästa praxis som beskrivs i detta blogginlägg kan du effektivt använda Proxies för att förbättra kvaliteten och tillförlitligheten i dina JavaScript-applikationer, med hänsyn till en global publik med lokaliserade valideringsstrategier.